<template>
        <div class="analysis">
            <v-touch
            v-on:panstart="onPanStart"
            v-on:panend="onPanEnd"
            v-bind:pan-options="{ direction: 'vertical', threshold: 100 }" style="height:100%;width:100%">
            <div class="tit">
                <div>世界卫生组织推荐标准</div>
                <div>每天需要摄入25克膳食纤维</div>
            </div>
            <div class="circle">
                <div>你今天吃得食物含有</div>
                <div><span class="num">{{goals}}</span><span>克</span></div>
                <div class="des">膳食纤维</div>
            </div>
            <div class="conculsion" v-if="goals>25">恭喜你<br/>今天已达标</div>
            <transition name="swing"
                enter-active-class="animated swing"
                leave-active-class="animated swing"
            >
                <div class="conculsion" style="color:#9a2626" v-if="goals<25 && swingFlag==true">很遗憾<br/>今天没达标</div>
            </transition>
            
            <div class="not_goal">不达标会怎么样?</div>
            <div class="red_trangle">
                <router-link :to="{name:'result'}" replace>
                    <img src="../../../static/img/analysis/red_trangle.png" alt="">
                </router-link>
            </div>
            </v-touch>
        </div>
</template>
<script>
export default {
    name:'analysis',
    data() {
        return {
            goals:0,
            swingFlag:false,
            clientY1:'',
            clientY2:''
        }
    },
    methods: {
        onPanStart(e){
            this.clientY1=e.srcEvent.clientY ||e.center.y
            },
        onPanEnd(e){
            
            this.clientY2=e.srcEvent.clientY ||e.center.y 
            if(this.clientY1-this.clientY2>30){
                this.$router.replace({name:'result'})
            }
        }
        },
    mounted() {
        if(this.$route.params.goals!='' && this.$route.params.goals!=undefined){
            const num=this.$route.params.goals.toFixed(1)
            this.goals=num
        }
        setTimeout(()=>{
            this.swingFlag=true
        },1000)

    },
}
</script>
<style lang="scss" scoped>
    .analysis{
        width: 100%;
        height: 100%;
        background: url('http://file.rzkeji.com/web/f6_activity/bg1.jpg');
        background-size: 100%;
        .tit{
            text-align: center;
            font-size: 35px;
            padding-top:30px;
            div:nth-child(2){
                font-size:45px
            }
        }
        .circle{
            margin:0 auto;
            margin-top:30px;
            border-radius: 50%;
            width: 500px;
            height: 500px;
            background: #a5957c;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            &>div{
                width:100%;
            }
            &>div:nth-child(1){
                margin-top:20px;
                font-size: 30px;

            }
            .num{
                color:#fff;
                font-size: 160px;
            }
            .num+span{
                color:#fff;
                font-size: 40px;
            }
            .des{
                font-size: 40px;
            }
        }
        .conculsion{
            color:#fff;
            font-size: 70px;
        }
        .not_goal{
            margin-top:30px;
            color:#fff;
            font-size: 60px;
            text-align: center;
        }
        .red_trangle{
            opacity: 0.6;
            margin-top:20px;
            img{
                width: 120px;
            }
        }
    }
</style>
